<template>
  <div>
    <el-card>
      <el-form ref="jobForm" :model="jobForm" :inline="true" class="demo-form-inline">
        <el-col :span="3">
          <el-form-item>
            <el-input placeholder="关键词" v-model="jobForm.search_word"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-cascader
                placeholder="地区"
                v-model="jobForm.city"
                :options="options.CityOption"
                :props="{ expandTrigger: 'hover',emitPath:false}"
                clearable
                filterable>
              <template slot-scope="{ node }">
                <i class="iconfont icon-fenlei-remen" v-if="node.data.label==='热门'" style="color: red"></i>
                {{ node.label }}
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-select
                placeholder="要求学历"
                :props="{ expandTrigger: 'hover'}"
                clearable
                v-model="jobForm.education"
                filterable>
              <el-option
                  v-for="item in options.EducationOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-cascader
                placeholder="职业筛选"
                v-model="jobForm.position"
                :options="options.PositionOption"
                :props="{ expandTrigger: 'hover',emitPath:false}"
                clearable
                filterable>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-select
                placeholder="工作经验"
                v-model="jobForm.work_exp"
                :props="{ expandTrigger: 'hover'}"
                clearable
                filterable>
              <el-option
                  v-for="item in options.WorkExperienceOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" @click="getParticiple()" :loading="loading.queryLoading">查询</el-button>
          </el-form-item>
        </el-col>


      </el-form>
    </el-card>
    <el-card style="margin-top: 1vh" v-loading="loading.queryLoading">
      <div id="a" style="height:70vh;width:100%" ref="wordcloud"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countData: {},
      options: {
        WorkExperienceOption: [],
        EducationOption: [],
        PositionOption: [],
        WorkTypeOption: [],
        CityOption: []
      },
      jobForm: {
        search_word: "",
        city: "",
        education: "",
        work_exp: "",
        position: "",
      },
      loading:{
        queryLoading:false
      }
    }
  },
  beforeMount() {
    this.getGenericsSelect()
  },
  mounted() {
    this.getParticiple()
  },
  methods: {
    getGenericsSelect() {
      for (let key of Object.keys(this.options)) {
        this.$api.getGenericSelect({params: {"type": key.replace('Option', '')}}).then(rep => {
          this.options[key] = rep.data
        })
      }
    },
    getParticiple() {
      this.loading.queryLoading = true

      this.$api.getJobParticiple(this.jobForm).then(rep => {
        let data = rep.data.data
        if (data.length!==0) {
          this.countData = data
          this.initChart()
        } else {
          this.$message({
            showClose: true,
            message: '该选项下无数据,请重新选择',
            type:"warning"
          });
        }


      }).finally(() => {
        setTimeout(()=>{
          this.loading.queryLoading = false
        },500)
      })
    },
    initChart() {
      let myChart = this.$echarts.init(this.$refs.wordcloud);
      const option = {
        title: {
          text: ['{a|招聘标签词云分析}','{b|\n(点击可跳转)}'].join(''),
          left: "center",
          textStyle: {
            rich:{
              a:{
                fontSize: '2rem', // 设置标题字体大小为20px,
                fontWeight:"bold"
              },
              b:{
                fontSize: '1rem'
              }
            },

          }
        },
        series: [{
          type: 'wordCloud',
          shape: [ "diamond", "star", "pentagon"][Math.floor(Math.random() * 6)],
          keepAspect: false,
          // maskImage: maskImage,
          left: 'center',
          top: 'center',
          width: '85%',
          height: '85%',
          right: null,
          bottom: null,
          sizeRange: [12, 80],
          rotationRange: [-90, 90],
          rotationStep: 45,
          gridSize: 12,
          drawOutOfBound: false,
          layoutAnimation: true,
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            // focus: 'self',
            textStyle: {
              textShadowBlur: 3,
              textShadowColor: '#333'
            }
          },
          //data属性中的value值却大，权重就却大，展示字体就却大
          data: this.countData
        }]
      }
      option && myChart.setOption(option)
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.on('click',function(params){

        window.open(`https://baike.baidu.com/search/word?word=${params.data.name}&fromModule=lemma_search-box`, '_blank').location;
      })
    }
  }
}
</script>

<style scoped>

</style>